<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/axios.min.js"></script>
    <script src="./js/api.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>

    <style>
      img {
        width: 100px;
      }
    </style>
  </head>
  <body>
    全选
    <input
      type="checkbox"
      name=""
      id=""
      onchange="allChange()"
      class="all-ipt"
    />
    <div>总价 <span class="count-span"></span></div>
    <ul id="list-ul">
      <!-- <li>
        <h2></h2>
        <img src="" alt="" />
        <p></p>
        <button>删除</button>
        <button>-</button>
        <input type="text" value="" />
        <button>+</button>
      </li> -->
    </ul>
    <script>
      loadCartList();
      //  购物车列表
      async function loadCartList() {
        let uid = localStorage.getItem("uid");
        let { data } = await axios.get(CartListAPI, { params: { id: uid } });
        console.log(data);
        let resArr = data.data.map(
          (v) => `
            <li>
                <input class="single-ipt" type="checkbox" name="" id="" onchange="singleChange()">
                <h2>${v.pname}</h2>
                <img src="${v.pimg}" alt="" />
                <p class="pprice-p">${v.pprice}</p>
                <button onclick="delFn(${v.pid},this)">删除</button>
                <button onclick="subFn(${v.pid},this)">-</button>
                <input type="text" value="${v.pnum}" class="pnum-ipt"/>
                <button class="cart-add-btn" data-pid="${v.pid}">+</button>
            </li>`
        );
        // let listUl = document.querySelector("#list-ul");
        // // 本句代码执行完 以后 listUl才有了内容  (请求是异步的，ul数据 最后才有的
        // listUl.innerHTML = resArr.join("");
        $("#list-ul").html(resArr.join(""));
        console.log(111111);
        //
        // let cartAddBtns = document.querySelectorAll(".cart-add-btn");
        // console.log(cartAddBtns);
        // for (let i = 0; i < cartAddBtns.length; i++) {
        //   cartAddBtns[i].onclick = async function () {

        //   };
        // }

        $(".cart-add-btn").click(async function () {
          console.log(this); //点击的加号按钮
          // console.log(this.previousElementSibling);
          // let ipt = this.previousElementSibling;

          // let pnum = parseInt(ipt.value) + 1;
          let pnum = parseInt($(this).prev().val()) + 1;

          let uid = localStorage.getItem("uid");
          // 获取自定义属性
          let pid = this.getAttribute("data-pid");
          let params = { uid, pid, pnum };
          try {
            let { data } = await axios.get(CartUpdateAPI, { params });
            console.log(data);
            // 获取输入框原来的值 加1
            // ipt.value = pnum;
            $(this).prev().val(pnum);
            countFn();
          } catch (error) {
            alert("请检查网络");
          }
        });
      }

      //cart-add-btn  获取加入购物车按钮 获取不到？
      let cartAddBtns = document.querySelectorAll(".cart-add-btn");
      console.log(cartAddBtns);

      async function subFn(pid, btn) {
        let ipt = $(btn).next();
        if (parseInt(ipt.val()) == 1) {
          //如果 输入框的值 是1  什么都不做
        } else {
          // ipt.value = parseInt(ipt.val()) - 1;
          ipt.val(parseInt(ipt.val()) - 1);

          // CartUpdateAPI
          let uid = localStorage.getItem("uid");
          let pnum = ipt.val();
          // let pnum = ipt.value;
          let params = { uid, pid, pnum };
          let { data } = await axios.get(CartUpdateAPI, { params });
          console.log(data);
          countFn();
        }
      }
      async function delFn(pid, btn) {
        console.log(pid);
        let uid = localStorage.getItem("uid");
        let { data } = await axios.get(CartDeleteAPI, { params: { uid, pid } });
        console.log(data);
        //
        // loadCartList()
        // btn.parentNode.remove();
        $(btn).parent().remove();
        countFn();
      }

      function singleChange() {
        console.log("singleChange");
        //计算总价
        /*   获取页面所有 被选中的 单选的input    遍历单选input -》
          ipt的父元素 -所在li -》里面 p  input
           */

        //  获取所有单选框
        countFn();

        // 判断一下是否所有单选框的checked 属性都是 true
        // 都是true  让allIpt.checked = true;
        let singleIpts = document.querySelectorAll(".single-ipt");
        //arr.every
        let arr = [...singleIpts];
        //
        let flag = arr.every((v) => v.checked == true);
        let allIpt = document.querySelector(".all-ipt");
        allIpt.checked = flag;
      }
      function allChange() {
        // let singleIpts = document.querySelectorAll(".single-ipt");
        // let allIpt = document.querySelector(".all-ipt");

        // // 根据 全选按钮的状态设置的 全部的单选按钮的状态
        // singleIpts.forEach((v) => (v.checked = allIpt.checked));

        $(".single-ipt").prop("checked", $(".all-ipt").prop("checked"));

        console.log("all");
        // 计算总价
        countFn();
      }

      function countFn() {
        let singleIpts = document.querySelectorAll(".single-ipt");
        console.log(singleIpts);
        // 伪数组 转为真数据
        let arr = [...singleIpts];
        console.log(arr);
        //过滤出了  输入框的checked属性为true元素
        let resArr = arr.filter((v) => v.checked == true);
        console.log(resArr);

        let num = 0;
        // 计算每一行 总价的  再累加起来
        resArr.forEach((singleIpt) => {
          //单选框所在的li
          let li = singleIpt.parentNode;
          let p = li.querySelector(".pprice-p");
          let pnumIpt = li.querySelector(".pnum-ipt");

          let count = p.innerHTML * pnumIpt.value;
          num = num + count;
        });
        let countSpan = document.querySelector(".count-span");

        countSpan.innerHTML = num;
      }
    </script>
  </body>
</html>
